<?php include "../public/header.php";?>
<?php include '../public/header_index.php' ?>
<?php include "../public/header_edit.php";?>
<style>
    .layui-col-space10{margin: unset!important;}
    .laytp-tree-table-cell.single-line > .laytp-tree-table-cell-content {overflow: unset!important;white-space: unset!important;text-overflow: unset!important;}
    #setauth_div{width: 200px;float: left;margin-left: 10px;margin-right: 5px}
    .setbut button{margin-left: 10px;}
</style>
<body id="optPage">
<form class="layui-form layui-form-pane" id="commentForm">
    <div class="page-title">
        <div class="page-title-con">
            <span>编辑</span>
            <div class="move_title"></div>
            <?php include "../public/sub.php";?>
        </div>
    </div>
    <div class="main-container">
        <div class="block-first">
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <label class="layui-form-label"><text>*</text>角色名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="name" placeholder="请输入" clearable autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <label class="layui-form-label">角色类型</label>
                        <div class="layui-input-block">
                            <input type="text" value="公司人员角色" placeholder="请输入" disabled autocomplete="off" class="layui-input disabled">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item height_auto">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <label class="layui-form-label label_textarea">备注</label>
                        <div class="layui-input-block">
                            <textarea id="explain" name="explain" placeholder="请输入" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <label class="layui-form-label">排序号</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" id="sort" placeholder="请输入" clearable autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="block-generic">
            <div class="layui-row layui-col-space10">
                <div id="table_title">
                    <div class="setbut">
                        <button id="setauth_optquan" key="1" class="layui-btn layui-btn-sm layui-btn-primary" type="button">操作权限全选/全不选</button>
                        <button id="setauth_zhan" key="1" class="layui-btn layui-btn-sm layui-btn-primary" type="button">折叠/展开</button>
                        <div id="layTips" type="button" style="float: right;margin-right: 30px;"><i class="layui-icon" style="font-size: 20px;font-weight: bold;">&#xe60b;</i></div>
                    </div>
                </div>
                <div class="layui-card-body" style="padding-right: 10px;">
                    <table id="datalist_auth" lay-filter="datalist_auth"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="toolbarDemo"></script>
</form>
<script>
    var param_id = getQueryVariable('id') || 0;
    $("#commentForm").validate({
        rules: {
            name: {required: true},
        },
        messages:{
            name: {required: "请输入"},
        }
    });
    render_input_attr();

    var mytable;
    layui.use(['laytp', 'form', "tree",'laypage','table','dropdown','soulTable','treeTable'], function() {
        var tree = layui.tree,laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown,
            form = layui.form, soulTable = layui.soulTable, treeTable = layui.treeTable;


        var tip_index;
        $("#layTips").hover(function(){
            tip_index = layer.tips('①依据所选菜单范围并拥有相应的操作权限；②拥有相应菜单的全部数据权限。',this,{time:0});
        },function(){
            layer.close(tip_index);
        });

        facade.ajax({type: 'get', url: ask_user_role_edit, data:{id:param_id}}).done(function(res){
            if (res.code === 2000) {
                var roleinfo = res.data.role;
                $("#name").val(roleinfo.name);
                $("#sort").val(roleinfo.sort);
                $("#explain").val(roleinfo.explain);

                show_role_auth(res.data.data);


            }
        });

        form.on('submit(add)', function(data){
            var validRes = $("#commentForm").valid();
            if(!validRes){return false;}

            var checkStatus = mytable.checkStatus();

            var menuArr = [];
            var butArr = [];
            var authArr = [];

            for(var key in checkStatus){
                menuArr.push(parseInt(checkStatus[key].id));

                $('input[butkey="'+checkStatus[key].id+'"]:checked').each(function(){
                    butArr.push(parseInt($(this).val()));
                });


            }
            data.field.menu = menuArr.join(',');
            data.field.but = butArr.join(',');
            data.field.auth = authArr;
            data.field.id = param_id;

            facade.ajax({url: ask_user_role_edit, data:data.field}).done(function(res){
                if (res.code === 2000) {
                    dataPostTimeOut();
                }
            });

            return false;
        });

    });


    function show_role_auth(treedata) {

        layui.use(["tree", "laytp",'laypage','table','dropdown','form','soulTable','treeTable'], function () {
            var tree = layui.tree,laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown,
                form = layui.form, soulTable = layui.soulTable, treeTable = layui.treeTable;

            // treeTable = $.extend(table, {config: {checkName: 'checked'}});
            mytable = treeTable.render({
                elem: "#datalist_auth",
                id: "datalist_auth",
                data: treedata,
                page: false,
                soulSort: TabInit.soulSort,
                method: 'GET',
                checkName: 'checked',
                toolbar: TabInit.toolbar,
                overflow: TabInit.overflow,
                defaultToolbar: ['', '', ''],
                filter: TabInit.filter,
                request: TabInit.request,
                response: TabInit.response
                ,treeDefaultClose: true
                , tree: {
                    iconIndex: 1        // 折叠图标显示在第几列
                    , arrowType: 'arrow2'   // 自定义箭头风格
                    , getIcon: function (d) {  // 自定义图标
                        if (d.children && d.children.length > 0) {  // 判断是否有子集
                            return '<i class="laytp-tree-icon laytp-tree-icon-folder"></i>';
                        } else {
                            return '<i class="laytp-tree-icon laytp-tree-icon-file"></i>';
                        }
                    }
                }
                ,parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.message,
                        "count": res.data.total,
                        "data": res.data.data
                    };
                }
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'name', title: '菜单权限',width:400}
                    ,{field:'name',title:'操作权限',templet: function(d){
                            var str = '', allstr = '', but=d.but;
                            if(but && but.length > 0){
                                var allcheck = true;
                                for (var key in but){
                                    if(but[key].checked){
                                        str += '<input type="checkbox" class="but" lay-filter="but" name="but" value="'+but[key].id+'" butkey="'+d.id+'" checked lay-skin="primary" title="'+but[key].title+'">';
                                    }else{
                                        allcheck = false;
                                        str += '<input type="checkbox" class="but" lay-filter="but" name="but" value="'+but[key].id+'" butkey="'+d.id+'" lay-skin="primary" title="'+but[key].title+'">';
                                    }
                                }
                                if(allcheck){
                                    allstr += '<input type="checkbox" class="allbut" lay-filter="allbut" checked lay-skin="primary" title="全选">';
                                }else{
                                    allstr += '<input type="checkbox" class="allbut" lay-filter="allbut" lay-skin="primary" title="全选">';
                                }
                            }
                            return '<div class="trcheckbox">'+allstr+str+'</div>';
                        }}
                ]]
                , done: function (res) {
                    setTimeout(function () {
                        mytable.expandAll();
                        mytable.expandAll();
                    },100)


                    for (var aa in res) {
                        if(res[aa].checked){
                            $("tr[data-id='"+res[aa].id+"']").children('td:first-child').find('input[type="checkbox"]').prop('checked', true);
                            res[aa].LAY_CHECKED = true;
                        }

                        for (var bb in res[aa]['children']) {
                            if(res[aa]['children'][bb].checked){
                                $("tr[data-id='"+res[aa]['children'][bb].id+"']").children('td:first-child').find('input[type="checkbox"]').prop('checked', true);
                                res[aa]['children'][bb].LAY_CHECKED = true;
                            }

                            for (var cc in res[aa]['children'][bb]['children']) {
                                if(res[aa]['children'][bb]['children'][cc].checked){
                                    $("tr[data-id='"+res[aa]['children'][bb]['children'][cc].id+"']").children('td:first-child').find('input[type="checkbox"]').prop('checked', true);
                                    res[aa]['children'][bb]['children'][cc].LAY_CHECKED = true;
                                }
                            }
                        }
                    }


                    render_from();
                    $(".laytp-tree-table-tool").remove();

                }
            });


            $("#setauth_zhan").click(function () {
                if($(this).attr('key') > 0){
                    mytable.foldAll();
                    $(this).attr('key', 0);
                }else{
                    mytable.expandAll();
                    $(this).attr('key', 1);
                }
            });



            $("#setauth_optquan").click(function () {
                if($(this).attr('key') > 0){
                    $('input.allbut').prop('checked', true);
                    $('input.but').prop('checked', true);
                    $(this).attr('key', 0);
                }else{
                    $('input.allbut').prop('checked', false);
                    $('input.but').prop('checked', false);
                    $(this).attr('key', 1);
                }
                render_from();
            });

            form.on('checkbox(allbut)',function (data) {
                if($(data.elem).prop('checked')){
                    $(data.elem).parents('div.trcheckbox').find('input.but').prop('checked', true);
                }else{
                    $(data.elem).parents('div.trcheckbox').find('input.but').prop('checked', false);
                }
                render_from();
            });

            form.on('checkbox(but)',function (data) {
                var checked = true;
                $.each($(data.elem).parents('div.trcheckbox').find('input.but'), function(key,item){
                    if(!$(this).prop('checked')){
                        checked = false;
                    }
                });
                if(checked){
                    $(data.elem).parents('div.trcheckbox').find('input.allbut').prop('checked', true)
                }else{
                    $(data.elem).parents('div.trcheckbox').find('input.allbut').prop('checked', false)
                }
                render_from();
            });

        });
    }

</script>
</body>
</html>
